<template>
  <div class="layout">
    <div class="investment-box">
      <div style="display: flex; justify-content: space-between; margin-top: 20px;">
        <Breadcrumb class="breadcrumb" :crumbs="crumbs" style="margin-bottom: 20px;"></Breadcrumb>
        <!-- <div class="backBtn" @click="goBack()">返回列表</div> -->
      </div>
      <div class="other">
        <div>
          <table border="1" cellspacing="0" width="100%" cellpadding="0">
            <tr>
              <td class="edge style" width="8%" align="center">位置：</td>
              <td class="of" width="30%" align="left">
                <div class="Ridicule">
                  <!-- <div class="whole">
                    <div class="wholea" @click="whole('位置')">全部</div>
                  </div>-->
                  <div
                    v-for="(item,index) in positionList"
                    :key="index"
                    @click="onPosition(item,'位置',index)"
                    :class="[positionindex.indexOf(index) != -1?'setting':'']"
                  >
                    <div class="screen">{{item.dictLabel}}</div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="edge style" width="8%" align="center">类型：</td>
              <td class="of" width="30%" align="left">
                <div class="Ridicule">
                  <!-- <div class="whole">
                    <div class="wholea" @click="whole('类型')">全部</div>
                  </div>-->
                  <div
                    v-for="(item,index) in typeList"
                    :key="index"
                    @click="onType(item,'类型',index)"
                    :class="[typeindex.indexOf(index) != -1?'setting':'']"
                  >
                    <div class="screen">{{item.dictLabel}}</div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="edge style" width="8%" align="center">等级：</td>
              <td class="of" width="30%" align="left">
                <div class="Ridicule">
                  <!-- <div class="whole">
                    <div class="wholea" @click="whole('等级')">全部</div>
                  </div>-->
                  <div
                    v-for="(item,index) in gradeList"
                    :key="index"
                    @click="onGrade(item,'等级',index)"
                    :class="[Gradeindex.indexOf(index) != -1?'setting':'']"
                  >
                    <div class="screen">{{item.dictLabel}}</div>
                  </div>
                </div>
              </td>
            </tr>
            <tr v-if="onpositionList.length!=0||onTypeList.length!=0||onGradeList.length!=0">
              <td class="edge" width="8%" align="center">搜索条件：</td>
              <td class="of" width="30%" align="left">
                <div class="Ridicule">
                  <el-tag
                    v-for="tag in onpositionList"
                    :key="tag.dictValue"
                    closable
                    style="margin-right: 20px;"
                    :disable-transitions="false"
                    @close="onpositionListSquare(tag)"
                  >{{tag.dictLabel}}</el-tag>
                  <el-tag
                    v-for="tag in onTypeList"
                    :key="tag.dictValue"
                    closable
                    style="margin-right: 20px;"
                    :disable-transitions="false"
                    @close="onTypeListSquare(tag)"
                  >{{tag.dictLabel}}</el-tag>
                  <el-tag
                    v-for="tag in onGradeList"
                    :key="tag.dictValue"
                    closable
                    style="margin-right: 20px;"
                    :disable-transitions="false"
                    @close="onGradeListSquare(tag)"
                  >{{tag.dictLabel}}</el-tag>
                  <div
                    class="clearFilter"
                    v-if="onpositionList.length!=0||onTypeList.length!=0||onGradeList.length!=0"
                    @click="onClearFilter"
                  >
                    <div class="Clear">清除筛选</div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="details" v-loading="_loading">
          <div class="information" v-for="(item,index) in informationList" :key="index">
            <div class="picture" @click="onJump(item)" v-if="item.buildingImages.length ==0">
              <!-- {{item.picture}} -->
              <PublicImage
                class="img"
                :src="require('@/assets/image/finance/product_dj.png')"
              ></PublicImage>
            </div>
            <div class="picture" @click="onJump(item)" v-else-if="item.buildingImages.length<=1">
              <PublicImage
                class="img"
                v-if="item.buildingVideo"
                :src="item.videoCover"
              ></PublicImage>
              <PublicImage
                class="img"
                v-else
                v-for="(itemr,indexr) in item.buildingImages"
                :key="indexr"
                :src="itemr"
              ></PublicImage>
              <!-- <img v-if="item.buildingVideo" class="img" v-lazy=" item.videoCover" />
              <img
                class="img"
                v-for="(itemr,indexr) in item.buildingImages"
                :key="indexr"
                v-lazy="itemr"
                v-else
              /> -->
            </div>
            <div class="picture" @click="onJump(item)" v-else>
              <img v-if="item.buildingVideo" class="img" v-lazy=" item.videoCover" />
              <img v-else class="img" v-lazy=" item.buildingImages[0] || item.buildingImages[1]" />
            </div>
            <div class="Building">
              <div class="floorName" @click="onJump(item)">{{item.buildingName}}</div>
              <div class="ClassificationType" @click="onJump(item)">
                <div class="Classification" v-show="item.industryType">
                  <div class="BuildingName">{{item.industryType}}</div>
                </div>
                <div class="Classification" v-show="item.buildingType">
                  <div class="BuildingName">{{item.buildingType}}</div>
                </div>
                <div class="Classification" v-show="item.buildingDecorationType">
                  <div class="BuildingName">{{item.buildingDecorationType}}</div>
                </div>
                <div class="Classification" v-show="item.canRegister == '可注册'">
                  <div class="BuildingName">{{item.canRegister}}</div>
                </div>
                <div class="Classification" v-if="item.relatedPoliciesNum != 0">
                  <div class="BuildingName">政策扶持</div>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="Contact">
                <div class="Landlord" @click="onJump(item)">
                  <div class="LandlordName">{{item.address}}</div>
                  <!-- <div
                    class="LandlordName"
                  >地上{{item.aboveGroundFloors}}层地下{{item.undergroundFloors}}层楼高{{item.buildingHeight}}米高{{item.buildingHeight}}米</div> -->
                  <div v-if="item.floorType != 1 && item.floorType" class="LandlordName">地上{{item.aboveGroundFloors}}地下{{item.undergroundFloors}}层楼高{{item.buildingHeight}}米</div>
                <div v-if="item.floorType == 1 && item.floorType" class="LandlordName">单层{{item.buildingFloor}}层</div>
                  <div class="LandlordName">{{item.grade}}</div>
                </div>
                <div class="buildingButton">
                  <Buttons :buttons="buttons_small" @check="checkBuildingIsContactedForUser(item)"></Buttons>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="notMore" v-if="Math.ceil(total / pageSize) <= pageNum && informationList.length != 0">暂时没有更多楼宇</div>
        <div class="paging" v-show="informationList.length!=0">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total,  prev, pager, next, sizes, jumper"
            :total="total"
          ></el-pagination>
        </div>
        <div v-if="informationList.length == 0 && !_loading">
          <div class="checkNone">
            <div class="warning">!</div>
            <div class="buildingsFound">未找到相关楼宇!</div>
          </div>
        </div>
        <div class="returnCss">
          <!-- <NormalBtn @clickBtn="$router.push('investment')" @></NormalBtn>
          <ErrorBtn @clickBtn="$router.push('investment')"></ErrorBtn> -->
          <Buttons :buttons="buttons" @jump="$router.replace('/investment')"></Buttons>
          <!-- <el-button class="returnPage" @click="$router.push('investment')">返回</el-button> -->
        </div>
      </div>
      <div>
        <!-- 缓存中没有数据的弹框 -->
        <el-dialog top="33vh" class="elDialog" :visible.sync="dialogTableVisible" width="500px" @close="closeDialog"
        destroy-on-close>
          <div class="nameHeader">
            <div class="contactBuilding">联系楼宇</div>
            <div class="apply">申请后获取楼宇联系人联系方式</div>
          </div>
          <el-divider></el-divider>
          <div class="_center">
            <!--label-width="125px" 未修改,或许要修改 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item class="el__input__msg" label="联系人:" prop="contacts">
                <el-input v-model="ruleForm.contacts" placeholder="请输入联系人" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item class="el__input__msg2" label="联系方式:" prop="phoneNumber">
                <el-input v-model="ruleForm.phoneNumber" placeholder="请输入联系方式" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item label="验证码:" prop="contactNumber">
                <div>
                  <div style="position: absolute;">
                    <el-input
                      style
                      class="inputSMS inputSize"
                      v-model="ruleForm.contactNumber"
                      placeholder="请输入短信验证码"
                      @input="onInputSMS"
                    ></el-input>
                    <div v-show="show_mes" class="show_mes">{{nameYzm}}</div>
                  </div>
                  <div style="position: relative;left: 250px;">
                    <a
                      style="text-decoration: underline;color: #367dc7;font-size: 14px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;"
                      @click="onContactNumber"
                      v-if="sendOut==false"
                    >获取验证码</a>
                    <div
                      v-if="sendOut==true"
                      style="position: relative;left: 20px;color: #367dc7;"
                    >{{countDown}}重新获取</div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <el-dialog top="33vh" width="500px" :visible.sync="innerVisible" append-to-body>
              <div class="nameHeader">
                <div class="contactBuilding" style="max-width:360px;white-space:normal; word-break:break-all;text-align: left;">{{buildingName}}</div>
              </div>
              <el-divider></el-divider>
              <!-- <div>
                <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="联系人:" style="max-width:400px;white-space:normal; word-break:break-all;">{{contacts}}</el-form-item>
                  <el-form-item label="联系方式:">
                    {{phoneNumber}}
                    <div style="position: relative; left: 100px;display: flex;">
                      <a
                        id="copy"
                        style="text-decoration: underline;color: #367dc7;font-size: 14px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;"
                        @click="onCopy"
                      >复制</a>
                    </div>
                  </el-form-item>
                </el-form>
              </div> -->
          <div class="_demo-ruleForm">
            <div class="_contacts">
              <div class="_contacts-title">联系人:</div>
              <div>{{contacts}}</div>
            </div>
            <div class="_phoneNumber">
              <div class="_phoneNumber-title">联系方式:</div>
              <div>
                <span>{{phoneNumber}}</span>
                <a
                  id="copy"
                  style="text-decoration: underline;color: #367dc7;font-size: 14px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px"
                  @click="onCopy"
                >复制</a>
              </div>
            </div>
          </div>
              <el-divider></el-divider>
              <div slot="footer" class="dialog-footer">
                <el-button class="return" type="primary" @click="onWithinConfirm">确 认</el-button>
              </div>
            </el-dialog>
          </div>
          <el-divider></el-divider>
          <div slot="footer" class="dialog-footer">
            <el-button class="Cancel" @click="onCancel('ruleForm')">取 消</el-button>
            <el-button class="return" type="primary" @click="onConfirm">确 认</el-button>
          </div>
        </el-dialog>
        <!-- 缓存中有对应数据的弹框 -->
        <el-dialog
          top="33vh"
          :visible.sync="hasData"
          width="500px">
          <div class="nameHeader">
                <div class="contactBuilding" style="max-width:360px;white-space:normal; word-break:break-all;text-align: left;">{{buildingName}}</div>
              </div>
              <el-divider></el-divider>
              <!-- <div>
                <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="联系人:" style="max-width: 400px;white-space: normal;word-break:break-all;text-align: left;">{{contacts}}</el-form-item>
                  <el-form-item label="联系方式:">
                    {{phoneNumber}}
                    <div style="position: relative; left: 100px;display: flex;">
                      <a
                        id="copy"
                        style="text-decoration: underline;color: #367dc7;font-size: 14px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;"
                        @click="onCopy"
                      >复制</a>
                    </div>
                  </el-form-item>
                </el-form>
              </div> -->
          <div class="_demo-ruleForm">
            <div class="_contacts">
              <div class="_contacts-title">联系人:</div>
              <div>{{contacts}}</div>
            </div>
            <div class="_phoneNumber">
              <div class="_phoneNumber-title">联系方式:</div>
              <div>
                <span>{{phoneNumber}}</span>
                <a
                  id="copy"
                  style="text-decoration: underline;color: #367dc7;font-size: 14px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px"
                  @click="onCopy"
                >复制</a>
              </div>
            </div>
          </div>
              <el-divider></el-divider>
              <div slot="footer" class="dialog-footer">
                <el-button class="return" type="primary" @click="()=>{this.hasData = false}">确 认</el-button>
              </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import utilsForm from '@/utils/verification.js'
import contactRules from '@/formRules/investment/contactRules.js'
import { getCheckBuildingIsContactedForUser, getVerifyAuthCode, getSendAuthCode, getInfoList } from '@/common/api/investment'

export default {
  mixins: [contactRules],
  components: {
    Breadcrumb,
  },
  data() {
    //这里存放数据
    return {
      buttons_small:[{text:"联系楼宇",type:"success",size:"s",method:"check"}],
      buttons:[{text:"返回",type:"normal",size:"l",method:"jump"}],
      // 有缓存的弹框
      hasData:false,
      _loading : false , // 加载中
      positionindex: [], // 位置选中列表
      typeindex: [], // 类型选中列表
      Gradeindex: [], // 级别选中列表
      innerVisible: false,
      pageNum: 1,
      pageSize: 10,
      total: null,
      currentPage: 0,
      dialogTableVisible: false, //
      contacts: '', //获取到的联系人
      phoneNumber: '', //获取到的联系电话
      crumbs: [
        {
          label: '招商中心',
          value: 'investment',
        },
        { label: '楼宇列表', value: '', choose: true },
      ],
      position: '', //位置
      positionList: [], //位置
      type: '', //类型
      typeList: [], //
      grade: '', //等级
      gradeList: [], //等级
      searchCriteria: '', //搜索条件
      searchCriteriaList: [], //搜索条件
      informationList: [], //列表数据
      classification: [], //列表
      onpositionList: [], //选择位置
      onTypeList: [], //选择类型
      onGradeList: [], //选择等级
      streetCodeList: [], //街道code
      buildingTypeList: [], //楼宇类型
      buildingLeaveList: [], //楼宇等级
      canRegisterList: [], //是否可注册
      industryTypeList: [], //产业领域
      buildingDecorationTypeList: [], //装修情况
      sms_auth_type: [], //短信类型
      contactid: '', //
      buildingName: '', //
      picture: '',
      countDown: 120, //发送验证码倒计时
      timer: null, //倒计时定时器
      sendOut: false, //发送验证码
      timeShow: false, //显示倒计时
      show_mes: false, //
      nameYzm: '', //
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 关闭弹框时销毁用户已输入的数据
    closeDialog(){
      console.log("触发了close")
      this.ruleForm.contacts = "";
      this.ruleForm.phoneNumber = "";
      this.ruleForm.contactNumber = ""
    },
    // 查询用户是否已经联系过此楼宇
    async checkBuildingIsContactedForUser(item){
      console.log('item', item)
      this.contactid = item.id
      let obj = {
        buildingInfoId: item.id
      }
      let {code, data, msg} = await getCheckBuildingIsContactedForUser(obj)
      console.log('data', data)
      if (code != "200") return this.$message.warning(msg);
      
      if(!data){
        this.dialogTableVisible = true
      }else{
        this.hasData = true
        console.log("this.informationList",this.informationList)
        this.contacts = this.informationList.find(item2 => {
          return item.id == item2.id
        }).contactsPerson
        this.phoneNumber = this.informationList.find(item2 => {
          return item.id == item2.id
        }).contactsPhone
        this.buildingName = this.informationList.find(item2 => {
          return item.id == item2.id
        }).buildingName
      }
    },
    // 获取bulidingLeave与字典表对应的数据
    // getBulidingLeave(){
    //   this.gradeList.find(item => {
    //     item.
    //   })
    // },
    checkHave(list,item){
      console.log(list,item)
    },
    onCopy() {
      var input = document.createElement('input')
      input.value = this.phoneNumber
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      this.$message.success('复制成功!')
      document.body.removeChild(input)
    },
    //取 消
    onCancel(formName) {
      var that = this
      this.dialogTableVisible = false
      that.sendOut = false
      that.timeShow = false
      clearInterval(that.timer)
      that.timer = null
      that.countDown = 120
      that.ruleForm = {
        contacts: '', //联系人
        phoneNumber: '', //联系电话
        contactNumber: '', //验证码
      }
      this.$refs[formName].resetFields()
    },
    //确 认
    onConfirm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.ruleForm.contactNumber == '') {
            this.show_mes = true
            this.nameYzm = '请输入验证码'
            return
          }
          var data = {
            userPhone: String(this.ruleForm.phoneNumber),
            authType: String(this.sms_auth_type[1].dictValue),
            authCode: this.ruleForm.contactNumber,
            buildingInfoId: this.contactid,
            contactsPerson: this.ruleForm.contacts,
          }
          let res = await getVerifyAuthCode(data)
          if (res.code == 200) {
            this.dialogTableVisible = false
            this.innerVisible = true
            this.contacts = res.data.contactsPerson
            this.phoneNumber = res.data.contactsPhone
            this.buildingName = res.data.buildingName
            this.show_mes = false
            // 缓存到localStorage中
            let verifyAuthCode = window.localStorage.getItem("verifyAuthCode") || [];
            if(verifyAuthCode.length){
              verifyAuthCode = window.JSON.parse(verifyAuthCode);
            }
            let result = verifyAuthCode.some(item => {
              return item.buildingInfoId == res.data.buildingInfoId
            })
            console.log(result)
            if(!result){
              verifyAuthCode.push(res.data);
              verifyAuthCode = window.JSON.stringify(verifyAuthCode)
              window.localStorage.setItem("verifyAuthCode",verifyAuthCode)
            }
            this.onCancel()
          } else {
            this.show_mes = true
            this.nameYzm = res.msg
          }
        } else {
          return false
        }
      })
    },
    onWithinConfirm() {
      this.innerVisible = false
      this.onCancel()
    },
    onInputSMS() {
      if (this.ruleForm.contactNumber != '') {
        this.show_mes = false
        this.nameYzm = ''
        return
      }
    },
    //获取验证码
    onContactNumber() {
      this.show_mes = false
      var contactsvalidator = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('请输入联系人'))
        } else {
          callback()
        }
      }
      var phoneNumberlidator = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('请输入联系方式'))
        } else {
          callback()
        }
      }
      this.rules = {
        contacts: [{ validator: contactsvalidator, trigger: 'blur' }],
        phoneNumber: [
          { validator: phoneNumberlidator, trigger: 'blur' },
          {
            validator: utilsForm.FormValidate.Form().checkAphone,
            trigger: 'blur',
          },
        ],
      }
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          var data = {
            userPhone: String(this.ruleForm.phoneNumber),
            authType: String(this.sms_auth_type[1].dictValue),
          }
          let res = await getSendAuthCode(data)
          if (res.code == 200) {
            this.$message({
              message: '发送成功',
              type: 'success',
            })
            this.sendOut = true
            this.timer = setInterval(this.fusn, 1000)
            window.localStorage.setItem('CHECK', true)
          } else {
            this.sendOut = false
            this.$message.error(res.msg)
          }
        } else {
          this.sendOut = false
          return false
        }
      })
    },
    fusn() {
      var that = this
      that.JuDGE = localStorage.getItem('CHECK')
      that.sendOut = Boolean(that.JuDGE)
      that.timeShow = Boolean(that.JuDGE)
      that.countDown--
      window.localStorage.setItem('TIME', that.countDown)
      if (window.localStorage.getItem('TIME') <= 0) {
        window.localStorage.removeItem('TIME')
        localStorage.removeItem('CHECK')
        localStorage.setItem('CHECK_FALSE', false)
      }
      if (that.countDown <= 0) {
        var check_false = localStorage.getItem('CHECK_FALSE')
        if (check_false == 'false') {
          that.sendOut = false
          that.timeShow = false
        }
        clearInterval(that.timer)
        that.timer = null
        that.countDown = 120
        localStorage.removeItem('CHECK_FALSE')
      }
    },
    goBack() {
      this.$router.back()
    },
    //选择位置
    onPosition(item, name, index) {
      console.log("位置",item)
      var whole = []
      var wholeList = []
      // this.positionindex = index
      whole.push(item)
      // console.log("whole",whole)
      // console.log("wholeList",wholeList)
      // this.onpositionList = whole
      console.log("this.streetCodeList",this.streetCodeList)
      whole.forEach((items, i) => {
        if(this.streetCodeList.indexOf(items.dictValue) == -1){
          this.streetCodeList.push(items.dictValue)
          this.positionindex.push(index)
          this.onpositionList.push(items)
        }
      })
      console.log("positionindex",this.positionindex)
      this.pageNum = 1 ; //复原页码
      this.buildingList(this.streetCodeList, this.buildingTypeList, this.buildingLeaveList)
    },
    //选择类型
    onType(item, name, index) {
      var whole = []
      whole.push(item)
      // this.typeindex = index
      // this.onTypeList = whole
      whole.forEach((items, idnex) => {
        if(this.buildingTypeList.indexOf(items.dictValue) == -1){
          this.buildingTypeList.push(items.dictValue)
          this.typeindex.push(index)
          this.onTypeList.push(items)
        }
      })
      this.pageNum = 1 ; //复原页码
      this.buildingList(this.streetCodeList, this.buildingTypeList, this.buildingLeaveList)
    },
    //选择等级
    onGrade(item, name, index) {
      var whole = []
      whole.push(item)
      // this.Gradeindex = index
      // this.onGradeList = whole
      whole.forEach((items, idnex) => {
        if(this.buildingLeaveList.indexOf(items.dictValue) == -1){
          this.buildingLeaveList.push(items.dictValue)
          this.Gradeindex.push(index)
          this.onGradeList.push(items)
        }
      })
      this.pageNum = 1 ; //复原页码
      this.buildingList(this.streetCodeList, this.buildingTypeList, this.buildingLeaveList)
    },
    // 列表查询
    async buildingList(streetCodeList = [], buildingTypeList = [], buildingLeaveList = []) {
    // async buildingList() {
      this._loading = true;
      console.log("streetCodeList",streetCodeList)
      streetCodeList = streetCodeList.map(item => {
        item = Number(item)
        return item
      })
      buildingTypeList = buildingTypeList.map(item => {
        item = Number(item)
        return item
      })
      buildingLeaveList = buildingLeaveList.map(item => {
        item = Number(item)
        return item
      })
      var building = {
        streetCodeList: streetCodeList,
        buildingTypeList: buildingTypeList,
        buildingLeaveList: buildingLeaveList,
      }
      let obj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      let { code, msg, rows, total } = await getInfoList(building, obj)
      this._loading = false;
      if (code != "200") return this.$message.warning(msg);
      this.informationList = rows
      this.total = total

      var classificationList = []
      // console.log(this.informationList)
      this.informationList.forEach((item, index) => {
        item.buildingImages = item.buildingImages.split(',')
        // console.log(item.buildingImages)
        //类型
        this.typeList.forEach((items, idnexs) => {
          if (item.buildingType == Number(items.dictValue)) {
            item.buildingType = items.dictLabel
          }
        })
        //等级
        // console.log("this.gradeList",this.gradeList)
        this.gradeList.forEach((itema, indexa) => {
          if (item.buildingLeaveList == Number(itema.dictValue)) {
            this.grade = itema.dictLabel
          }
          if(item.buildingLeave == Number(itema.dictValue)){
            item.grade = itema.dictLabel
          }
        })
        //是否可注册
        this.canRegisterList.forEach((itemx, indexx) => {
          if (item.canRegister == Number(itemx.dictValue)) {
            item.canRegister = itemx.dictLabel
          }
        })
        //装修情况
        this.buildingDecorationTypeList.forEach((itemr, indexx) => {
          if (item.buildingDecorationType == Number(itemr.dictValue)) {
            item.buildingDecorationType = itemr.dictLabel
          }
        })
        //楼宇产业领域
        this.industryTypeList.forEach((itemr, indexx) => {
          if (item.industryType == Number(itemr.dictValue)) {
            item.industryType = itemr.dictLabel
          }
        })
      })
      console.log(this.informationList)
      // this.classification = classificationList
      this._loading = false;
    },
    whole(name) {
      var whole = {
        dictLabel: '全部',
        dictType: '',
        dictValue: '0',
      }
      if (name == '位置') {
        this.onpositionList.push(whole)
      } else if (name == '类型') {
        this.onTypeList.push(whole)
      } else if (name == '等级') {
        this.onGradeList.push(whole)
      }
    },
    //搜索条件点击关闭
    onpositionListSquare(tag) {
      console.log("tag",tag)
      //选择位置
      // console.log("this.positionindex.indexOf(tag.dictValue)",this.positionindex.indexOf(Number(tag.dictValue)))
      this.positionindex.splice(this.positionindex.indexOf(Number(tag.dictValue - 1)), 1)
      // console.log("22220",this.streetCodeList.indexOf(tag.dictValue))
      // console.log("22223",this.streetCodeList)
      this.streetCodeList.splice(this.streetCodeList.indexOf(tag.dictValue), 1)
      let newArr = []
      this.onpositionList.forEach(item => {
        if(!(item.dictValue == tag.dictValue)){
          newArr.push(item);
        }
      })
      this.onpositionList = newArr;
      // console.log("this.positionindex",this.positionindex)
      // console.log("this.streetCodeList",this.streetCodeList)
      console.log("this.onpositionList",this.onpositionList)
      this.pageNum = 1 ; //复原页码
      this.buildingList(this.streetCodeList, this.buildingTypeList, this.buildingLeaveList)
    },
    onTypeListSquare(tag) {
      console.log("tag",tag)
      //选择类型
      this.typeindex.splice(this.typeindex.indexOf(Number(tag.dictValue - 1)), 1)
      this.buildingTypeList.splice(this.buildingTypeList.indexOf(tag.dictValue), 1)
      let newArr = []
      this.onTypeList.forEach(item => {
        if(!(item.dictValue == tag.dictValue)){
          newArr.push(item);
        }
      })
      this.onTypeList = newArr;
      // this.typeindex = null //
      // this.buildingTypeList = null
      // this.onTypeList.splice(this.onTypeList.indexOf(tag.dictValue), 1)
      this.pageNum = 1 ; //复原页码
      this.buildingList(this.streetCodeList, this.buildingTypeList, this.buildingLeaveList)
    },
    onGradeListSquare(tag) {
      console.log("tag",tag)
      //选择等级
      this.Gradeindex.splice(this.Gradeindex.indexOf(Number(tag.dictValue - 1)), 1)
      this.buildingLeaveList.splice(this.buildingLeaveList.indexOf(tag.dictValue), 1)
      let newArr = []
      this.onGradeList.forEach(item => {
        if(!(item.dictValue == tag.dictValue)){
          newArr.push(item);
        }
      })
      this.onGradeList = newArr;
      // this.Gradeindex = null //
      // this.buildingLeaveList = null
      // this.onGradeList.splice(this.onGradeList.indexOf(tag.dictValue), 1)
      this.pageNum = 1 ; //复原页码
      this.buildingList(this.streetCodeList, this.buildingTypeList, this.buildingLeaveList)
    },
    onClearFilter() {
      console.log("清除筛选")
      this.onpositionList = []
      this.onTypeList = []
      this.onGradeList = []
      this.streetCodeList = []
      this.buildingTypeList = []
      this.buildingLeaveList = []
      this.positionindex = [] //
      this.typeindex = [] //
      this.Gradeindex = [] //
      this.pageNum = 1 ; //复原页码
      this.buildingList([], [], [])
    },
    contactBuilding(item) {
      this.contactid = item.id
      // 获取缓存数据
      let verifyAuthCode = window.localStorage.getItem("verifyAuthCode") || [];
      if(verifyAuthCode.length){
        verifyAuthCode = window.JSON.parse(verifyAuthCode);
      }
      let data = verifyAuthCode.find(i => {
        return i.buildingInfoId == this.contactid
      })
      if(!data){
        this.dialogTableVisible = true
      }else{
        this.contacts = data.contactsPerson
        this.phoneNumber = data.contactsPhone
        this.buildingName = data.buildingName
        this.hasData = true
      }
    },
    handleSizeChange(e) {
      let that = this
      that.pageSize = e
      this.buildingList(this.streetCodeList, this.buildingTypeList, this.buildingLeaveList)
    },
    handleCurrentChange(e) {
      let that = this
      that.pageNum = e
      this.buildingList(this.streetCodeList, this.buildingTypeList, this.buildingLeaveList)
    },
    onJump(item) {
      this.$router.push({ path: '/investment/investmentdetails', query: { id: item.id } })
    },

    async dictionaryQuery() {
      let api = `building_type,building_leave,street_code,building_register_state,building_decoration_type,sms_auth_type,building_industry`
      // 调用公共方法中的查询字典表
      this.getDictList(this,api).then(res => {
        this.positionList = res.street_code //位置
        this.typeList = res.building_type //类型
        this.gradeList = res.building_leave //等级
        this.sms_auth_type = res.sms_auth_type //短信类型
        this.canRegisterList = res.building_register_state //是否可注册
        this.buildingDecorationTypeList = res.building_decoration_type //装修情况
        this.industryTypeList = res.building_industry //楼宇产业领域
        this.buildingList()
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.dictionaryQuery()
    this.buildingList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
// 弹框样式,暂时还不更改
// ._center{
//   margin: 39px 0;
//   .el-form-item{
//     margin-bottom: 0px;
//   }
//   .el-form-item__label{
//     color: #595E64;
//   }
// }
._demo-ruleForm{
  margin:47px 0 54px 0px;
  text-align: left;
  // max-width:320px;
  white-space:normal; 
  word-break:break-all;
  display:flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  ._contacts{
    margin-bottom:20px;
  }
  ._phoneNumber,._contacts{
    // margin-left: 140px;
    display:flex;
    width: 300px;
    flex-wrap:nowrap
  }
  ._contacts-title,._phoneNumber-title{
    margin:0 10px 0 0;
    flex:0 0 60px;
    text-align: right;
  }
}
.notMore{
  text-align: center;
  color: #ccc;
  padding: 10px;
}
.investment-box {
  width: 1200px;
  margin: 0 auto;
}
.companyMyResumeDetail .backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.companyMyResumeDetail .backBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}
.other {
  margin-right: 20px;
  min-height: 69vh;
  .edge {
    height: 40px;
    background-color: #f8f8f8;
    font-weight: bold;
    color: #333;
  }
  .of {
    text-indent: 1.5em;
    color: #666666;
    // font-weight: bold;
    font-size: 14px;
  }
}
table,
table tr th,
table tr td {
  border: 1px solid #eeeeee;
}
table tr td {
  border-left: none;
  border-right: none;
}
table {
  width: 100%;
  min-height: 25px;
  line-height: 25px;
  text-align: center;
  border-collapse: collapse;
  padding: 2px;
  color: #666666;
  font-size: 14px;
}
.style {
  text-indent: 2em;
}
.whole {
  background-color: red;
  text-align: center;
  color: #ffff;
  // width: 23px;
  // height: 11px;
  height: 23px;
  width: 35px;
  border-radius: 5px;
  .wholea {
    // position: relative;
    // right: 9px;
  }
}
.Ridicule {
  display: flex;
  margin-left: 20px;
  font-size: 12px;
  text-indent: 0em;
  align-items: center;
  word-wrap: break-word;
  flex-wrap: wrap;
  .el-tag--light{
    margin: 5px 20px 5px 0;
  }
  ::v-deep .el-tag {
    border-color: #045db9;
    background-color: #ffffff;
    color: #045db9;
  }
}
.clearFilter {
  background-color: #909090;
  color: #ffffff;
  margin-left: 15px;
  // width: ;
  width: 70px;
}
.Clear {
  // position: relative;
  // right: 10px;
  text-align: center;
  cursor: pointer;
}
.screen {
  margin: 0px 20px;
}
.screenGrade {
  margin-left: 19px;
}
.details {
  margin-top: 20px;
  min-height: 40px;

  .information {
    margin-bottom: 15px;
    width: 100%;
    height: 240px;
    border: 1px solid #eeeeee;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    .picture {
      // display: flex;
      width: 300px;
      // border: 1px solid red;
      .img {
        width: 300px;
        height: 200px;
        object-fit:cover;
      }
    }
    .Building {
      margin-left: 30px;
      width: 100%;
      .floorName {
        text-align: left;
        color: #333333;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .ClassificationType {
        display: flex;
        font-size: 12px;
        .Classification {
          width: 82px;
          background: #f1f2f4;
          height: 26px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #045db9;
          margin-right: 15px;
          border-radius: 5px;
        }
        .BuildingName {
        }
      }
      .Contact {
        display: flex;
        justify-content: space-between;
        .Landlord {
          text-align: left;
          font-size: 7px;
          line-height: 34px;
          height: 122px;
          .LandlordName {
            margin-bottom: 5px;
            white-space:normal; 
            word-break:break-all;
            line-height: 30px;
          }
        }
        .buildingButton {
          display: flex;
          align-items: flex-end;
        }
      }
    }
  }
  .contactBuilding {
    background-color: #045db9;
    color: #ffff;
    border: none;
  }
  ::v-deep .el-divider--horizontal {
    margin: 10px 0;
  }
}
.paging {
  display: flex;
  justify-content: flex-end;
  line-height: 100px;
}
.returnCss {
  height: 165px;
  display: flex;
  justify-content: center;
  // align-items: center;
  .returnPage {
    // width: 100px;
    // background-color: #045db9;
    // color: #ffff;
    // border: none;
    width: 120px;
    height: 40px;
    background: #f1f2f4;
    color: #045db9;
    margin-bottom: 121px;
  }
  :nth-last-child(1){
    margin: 0px !important;
  }
}
::v-deep .el-dialog__body {
  padding: 0px 0px;
}
.nameHeader {
  display: flex;
  .contactBuilding {
    font-size: 16px;
    font-weight: bold;
    margin-left: 20px;
    border: none;
    color: #333;
  }
  .apply {
    display: flex;
    align-items: flex-end;
    margin-left: 10px;
    color:#595E64;
    font-size: 12px;
  }
}
::v-deep.el-dialog__footer {
  padding: 0px 20px 20px;
}
.demo-ruleForm {
  color: #595e64;
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  ::v-deep .el-dialog__footer {
    padding: 0px 20px 10px;
  }
  ::v-deep .el-button--primary {
    background: #045db9;
    border: 1px solid #eeeeee;
    width: 65px;
    height: 32px;
  }
  .inputSMS {
    ::v-deep .el-input__inner {
      width: 240px;
    }
  }
  .show_mes {
    // width: 74px;
    text-align: left;
    line-height: 1;
    font-size: 12px;
    color: red;
  }
  ::v-deep .el-input__inner {
    border: 1px solid #f1f2f4;
    height: 32px;
    width: 60%;
    display: flex;
  }
  ::v-deep .el-form-item__content {
    display: flex;
  }
}

.return {
  ::v-deep.el-button {
    padding: 0px;
    width: 65px;
    height: 32px;
    background-color: #045db9;
  }
}
.Cancel {
  ::v-deep.el-button {
    padding: 0px;
    border: 1px solid #eeeeee;

    color: #367dc7;
    background: #f1f2f4;

    width: 65px;
    height: 32px;
  }
}
.elDialog {
  ::v-deep .el-divider--horizontal {
    margin: 10px 0px 10px 0px;
  }
}
.inputSMS {
  ::v-deep .el-input__inner {
    width: 252px;
  }
}

.checkNone {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  margin-top:50px;
  margin-bottom: 20px;
  .warning {
    width: 22px;
    height: 22px;
    opacity: 1;
    background-color: #faae17;
    border-radius: 10px;
    margin-right: 10px;
    color: #ffffff;
  }
  .buildingsFound {
  }
}
.setting {
  background-color: #f1f2f4;
  color: #045db9;
  border-radius: 3px;
  font-weight: Regular;
}
</style>

<style>
/* 弹框样式修改
.inputSize input{
  width: 225px !important;
}
.el__input__msg .el-form-item__error{
  position: absolute;
  right: -160px;
  top: 5px;
}
.el__input__msg2 .el-form-item__error{
  position: absolute;
  right: -170px;
  top: 5px;
} */
</style>